<template>
    <div class="charts-container" :class="{'scroll': isHasScroll}">
        <div class="charts-date-type">
            <date-picker @getData="getData" :dateDataType="dateDataType" :date_interval="date_interval" size="small"></date-picker>
        </div>
        <div class="charts-box">
            <div class="charts-header">
                <div class="charts-title">视频咨询次数趋势</div>
                <router-link class="charts-more"  v-if="admin_is_super == 1 || admin_id == 190" :to="{path: 'video-consult-details', query: {data_type: searchContent.data_type /*, begin: date_interval[0], end: date_interval[1]*/}}">
                数据明细记录<i class="el-icon-d-arrow-right" />
                </router-link>
            </div>
            <!--div class="charts-search">
                <el-select 
                    v-model="searchContent.data_type" 
                    placeholder="请选择" 
                    size="small"
                    @change="handleChange">
                    <el-option
                        v-for="item in dataTypeArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </div-->
            <div class="charts-content">
                <charts :dataArr="dataArr" :showParticleSize="showParticleSize" container="c1" :hasType="false"></charts>
            </div>
        </div>
        <div class="charts-box" style="height: 420px;">
            <div class="charts-header">
                <div class="charts-title">视频咨询次数明细</div>
            </div>
            <div class="charts-content" style="padding-top: 0;">
                <Lists :searchContent="searchContent"/>
            </div>
        </div>
        <!--div class="charts-box">
            <div class="charts-header">
                <div class="charts-title">视频咨询时长分布</div>
            </div>
            <div class="charts-content" style="padding-top: 10px;">
                <charts-bar :dataArr="dataArr2" :showParticleSize="false" _particleSize="sort" container="c2" :hasType="false"></charts-bar>
            </div>
        </div-->
    </div>
</template>
<script>
import datePicker from '../datePicker.vue';
import charts from '../charts.vue';
import chartsBar from '../charts-bar.vue';
import Lists from './video-consult-lists.vue';
export default {
    data() {
        return {
            dataTypeArr: [
                {label: '咨询次数', value: 0},
                {label: '购车咨询', value: 1},
                {label: '售后咨询', value: 2},
                {label: '定损咨询', value: 3},
                {label: '远程诊断', value: 4}
            ],
            showParticleSize: false,    // 粒度控件
            searchContent: {
                data_type: 0,         // 类型
                begin_date: null,
                end_date: null
            },
            dataArr: {
                tooltip: {
                    valueSuffix: ' 次' // 数据列 y 值得后缀字符串
                },
                series:  []
            },
            dataArr2: {
                xAxis: {
                    labels: {
                        style: {
                            fontSize: '11'
                        }
                    },
                },
                formatter(total) {
                    return this.y + '次' + ' (' + (total > 0 && (this.y * 100 / total).toFixed(2) || '0') + '%)'; // 格式化
                },
                tooltip: false,
                pointWidth: 26,
                series:  []
            },
            isHasScroll: false,
            dateDataType: null,
            date_interval: [],
            admin_is_super: 0,
            admin_id: 0
        }
    },
    components: { datePicker, charts, chartsBar, Lists },
    created() {
        this.admin_is_super = this.$store.getters["user_info"].admin_is_super
        this.admin_id = this.$store.getters["user_info"].admin_id
        this.dateInterval = this.$route.params.dateInterval;
    },
    methods: {
        handleChange() {
            this.getData()
        },
        getData(dateInterval = null) {

            // 请求参数
            let datas = this.searchContent;
            if(this.dateInterval) {
                dateInterval = this.dateInterval;

                // 更新日期选中值 
                const  startDate = Date.parse(dateInterval[0]);
                const  endDate = Date.parse(dateInterval[1]);
                const diff_days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
                if(diff_days <= 7) {
                    this.dateDataType = "visit_date_7"
                } else if(diff_days <= 30) {
                    this.dateDataType = "visit_date_30"
                } else {
                    this.dateDataType = "visit_date_custom"
                }
                this.date_interval = dateInterval;
                this.dateInterval = null;
            }
            
            if(dateInterval) {
                datas.begin_date = dateInterval[0];
                datas.end_date = dateInterval[1];
                this.date_interval = dateInterval
                this.searchContent = datas
            }

            // 数据请求
            this.$http.get('/admin/yt_car/index.php?act=statistic&op=consultStatistic', {params: datas})
            .then(res => {
                if(res.code == 1) {

                    // 视频连接次数
                    this.dataArr.series = [{
                        name: this.getTypeName(),
                        // lineColor: '#1890FF',
                        color: '#1890FF',
		                data: res.data.count || [],
                    }];

                    // 视频时长分布
                    this.dataArr2.series = [{
                        name: this.getTypeName(),
                        // color: '#1890FF',
                        color: { // 柱形颜色，不是通过fillColor 设置，而是color, 这里是设置渐变颜色
                            // linearGradient: [0, 0, 0, 1500],  // 线性渐变
                            // radialGradient: {cx: 0, cy: -0.8, r: 2.3}, // 镜像渐变
                            linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
                            stops: [
                                [0, 'rgb(24, 144, 255, 0.4)'],
                                [1, '#1890FF']
                            ],
                        },
                        data: res.data.length || [],
                    }];

                    // 计算总值
                    this.dataArr2.total = this.dataArr2.series[0].data.reduce((sum, item) => {
                        return sum + item[1];
                    }, 0) || 0;

                    // 判断是否存在滚动条
                    if(this.hasScrollbar()) this.isHasScroll = true;
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        getTypeName() {
            return this.dataTypeArr.filter(item => item.value == this.searchContent.data_type)[0].label;
        },
        hasScrollbar() {
            return document.querySelector(".charts-container").scrollHeight > (document.querySelector(".charts-container").offsetHeight || document.querySelector(".charts-container").clientHeight);
        }
    }
}
</script>
<style scoped lang="scss">
    @import url('~@/common/scss/charts-public.scss'); 
    .charts-container {
        box-shadow: none;
        // width: 100%;
        width: calc(100% + 10px);
        height: calc(100% - 29px);
        margin: 0 -5px;
        // overflow-y: auto;
        &.scroll {
            padding-right: 3px;
        }
    }
    .charts-date-type { margin: 16px 0 0 4px; }
    .charts-box {
        background: #fff;
        box-shadow: 0px 0px 10px #ddd;
        box-sizing: border-box;
        height: calc(50% - 30px);
        height: 420px;
        margin: 15px 5px;
        position: relative;
        .charts-more {
            top: 11px;
        }
        .charts-content {
            padding-top: 10px;
            /deep/ .chart-content { padding-bottom: 10px;}
        }
    }
</style>